<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/top.css">
    <link rel="stylesheet" href="./css/footer.css">
    <link rel="stylesheet" href="./css/member_center.css">
    <!-- 轮播图样式 -->
    <script src="./js/jquery.min.js"></script>
</head>

<body>
    <!-- 页眉区域 -->
    <div class="head">
        <div class="wrapper">
            <h2 class="fl">legochina.cn</h2>
            <span class="fr">欢迎光临 <a href="#">乐购</a> ，请 登陆\ <a href="./login.html">注册</a> </span>
        </div>
    </div>
    <!-- 页眉结束 -->

    <!-- 导航栏区域 -->
    <div class="nav wrapper">
        <h1><img src="./imgs/logo8.png" alt=""></h1>
        <div class="top wrapper clearfix">
            <p>乐我所乐，我的VIP！</p>
            <a href="#">首页</a>
            <a href="#" style="background-color: #ff6600; color: white;">我的订单</a>
            <a href="#">会员特权</a>
        </div>
    </div>
    <!-- 导航栏接结束 -->

    <!-- 内容区域 -->
    <!-- 内容第一区域 -->
    <div class="content1 wrapper clearfix">
        <!-- 左边区域 -->
        <div class="left fl">
            <div class="box1">
                <img src="./imgs/1001.png" alt="">
            </div>
            <div class="box2">
                <img src="./imgs/57bc141bNa112ab22.png" alt="">
                <img src="./imgs/57bc1430Nf431e2e8.png" alt="">
                <img src="./imgs/57bc1446N2d4d5d52.png" alt="">
                <img src="./imgs/57bc1452N46c15d15.png" alt="">
            </div>
        </div>
        <div class="right fl">
            <div class="box1">
                <span>订单列表</span>
                <span>待付款<i>1</i></span>
                <span>待收货<i>0</i></span>
                <span>待评价<i>99+</i></span>
            </div>
            <p>全部订单(6)</p>
            <div class="box2">
                <input type="checkbox" class="checkall"><span>全选</span>
                <span>商品</span>
                <span>单价</span>
                <span>状态</span>
            </div>
            <ul>
                <li>
                    <input type="checkbox">
                    <div class="imgbox">
                        <img src="./imgs/index08_05.jpg" alt="">
                    </div>
                    <span>从你的全世界路过</span>
                    <span>41.00</span>
                    <span>待付款</span>
                    <a>删除</a>
                </li>
                <li>
                    <input type="checkbox">
                    <div class="imgbox">
                        <img src="./imgs/index08_05.jpg" alt="">
                    </div>
                    <span>从你的全世界路过</span>
                    <span>41.00</span>
                    <span>待付款</span>
                    <a>删除</a>
                </li>
                <li>
                    <input type="checkbox">
                    <div class="imgbox">
                        <img src="./imgs/index08_05.jpg" alt="">
                    </div>
                    <span>从你的全世界路过</span>
                    <span>41.00</span>
                    <span>待付款</span>
                    <a>删除</a>
                </li>
                <li>
                    <input type="checkbox">
                    <div class="imgbox">
                        <img src="./imgs/index08_05.jpg" alt="">
                    </div>
                    <span>从你的全世界路过</span>
                    <span>41.00</span>
                    <span>待付款</span>
                    <a>删除</a>
                </li>
                <li>
                    <input type="checkbox">
                    <div class="imgbox">
                        <img src="./imgs/index08_05.jpg" alt="">
                    </div>
                    <span>从你的全世界路过</span>
                    <span>41.00</span>
                    <span>待付款</span>
                    <a>删除</a>
                </li>
                <li>
                    <input type="checkbox">
                    <div class="imgbox">
                        <img src="./imgs/index08_05.jpg" alt="">
                    </div>
                    <span>从你的全世界路过</span>
                    <span>41.00</span>
                    <span>待付款</span>
                    <a>删除</a>
                </li>
            </ul>
            <div class="box3">
                <input type="checkbox" class="checkall">
                <span>全选</span>
                <span>删除选中订单商品</span>
                <span>已选中 <i>1</i>件商品</span>
                <span>总价 <i>41.00</i></span>
                <a class="fr">去结算</a>
            </div>
            <!-- 提交订单的弹窗 -->
            <div class="mask_big">
                <div id="pop-up_windows">
                    <div class="top">确认付款<span class="fr">X</span></div>
                    <div class="buttom">
                        <p>是否去结算?</p>
                        <a>取消</a>
                        <a href="./member_center.html" target="_blank">确认</a>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <div class="content5 wrapper">
        <!-- 魔兽广告 -->
        <div class="ms_advertising"></div>
    </div>
    <!-- 页脚区域 -->
    <div class="footer">
        <div class="top">
            <div class="wrapper">
                <ul>
                    <li><img src="./imgs/222_11.png" alt=""></li>
                    <li><img src="./imgs/222_13(1).png" alt=""></li>
                    <li><img src="./imgs/222_15.png" alt=""></li>
                    <li><img src="./imgs/222_17.png" alt=""></li>
                </ul>
            </div>
        </div>
        <div class="wrapper box1">
            <div class="buttom">
                <ul>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">发票制度</a></li>
                    <li><a href="#">账户管理</a></li>
                    <li><a href="#">会员优惠</a></li>
                </ul>
                <ul>
                    <li><a href="#">支付方式</a></li>
                    <li><a href="#">货到付款</a></li>
                    <li><a href="#">网上支付</a></li>
                    <li><a href="#">礼品卡支付</a></li>
                    <li><a href="#">银行转帐</a></li>
                </ul>
                <ul>
                    <li><a href="#">订单服务</a></li>
                    <li><a href="#">订单配送查询</a></li>
                    <li><a href="#">订单状态说明</a></li>
                    <li><a href="#">自助取消订单</a></li>
                    <li><a href="#">自助修改订单</a></li>
                </ul>
                <ul>
                    <li><a href="#">退换货</a></li>
                    <li><a href="#">退换货政策</a></li>
                    <li><a href="#">自助申请退换货</a></li>
                    <li><a href="#">退换货进度查询</a></li>
                    <li><a href="#">退款方式和时间</a></li>
                </ul>
                <ul>
                    <li><a href="#">商家服务</a></li>
                    <li><a href="#">商家中心</a></li>
                    <li><a href="#">运营服务</a></li>
                    <li><a href="#">加入尾品汇</a></li>
                </ul>
                <img src="./imgs/logo_00.png" alt="" class="fl">
            </div>
            <p>
                公司简介 | Investor Relations | 网站联盟 | 乐购招商 | 机构销售 | 手机乐购 | 官方Blog | 热词搜索
            </p>
            <p>Copyright (C) 乐购网 2004-2016, All Rights Reserved</p>
        </div>
        <!-- 返回顶部 -->
        <div class="getback"></div>
    </div>


    <script>
        // 获取全选按钮
        $(".checkall").on('click', function () {
            let bool = $(this).prop('checked');
            $('input').prop('checked', bool)
        });

        $('input:not(.checkall)').click(function () {
            if (!$(this).prop('checked')) {
                $(".checkall").prop('checked', false)
            }
        })
        // 当用户全部选中后  使全选按钮选中
        $('input:not(.checkall)').change(function () {
            if($('input:checked').length==$('input:not(.checkall)').length){
                $(".checkall").prop('checked', true)
            }
        })


        // 删除按钮

        $('.right li a').on('click', function () {
            $(this).closest('li').remove();
            // 渲染商品数量
            let a = $('.right li').length
            $('.right>p').text('全部订单' + '(' + a + ')')
        });

        //是否去结算
        $('.box3 a').click(function () {
            $('.mask_big').css('display', 'block');
        });
        //取消按钮
        $('.mask_big .buttom a:first').click(function () {
            $('.mask_big').css('display', 'none')
        });
        //小叉叉
        $('.mask_big .top span').click(function () {
            $('.mask_big').css('display', 'none')
        })



    </script>
</body>